---
title: "Accessibility Checker Rule Help: WCAG20_Text_LetterSpacing"
---
import "../../../styles/ToolHelp.scss"
import { CodeSnippet, Tag } from "carbon-components-react";

<div className="toolHelp">
<Row>
<Column colLg={16} colMd={8} colSm={4} className="toolHead">

### Verify space characters are not being used to create space between the letters of a word

<div id="locLevel"></div>

Use CSS `letter-spacing` to control spacing within a word

</Column>
</Row>
<Row>
<Column colLg={11} colMd={5} colSm={4} className="toolMain">

### Why is this important?

The visual appearance of spacing in text should be accomplished using style sheets to maintain meaningful text sequencing. Simply adding blank characters to control the spacing may change the meaning, pronunciation or the interpretation of the word or cause the word not to be programmatically recognized as a single word.

<div id="locSnippet"></div>

### What to do

 * Verify space characters are not being used to create space between the letters of a word;
 * OR, if the letters of a word letters need to be spaced out, [use the CSS `letter-spacing` property](https://www.w3.org/WAI/WCAG21/Techniques/css/C8.html).

</Column>
<Column colLg={5} colMd={3} colSm={4} className="toolLeft">

### About this requirement

[IBM 1.3.2 Meaningful Sequence](https://www.ibm.com/able/requirements/requirements/#1_3_2)
[WCAG 2.1 CSS technique C9](https://www.w3.org/WAI/WCAG21/Techniques/css/C8.html)

### Who does this affect?

 * Blind people using a screen reader
 * People with reading disabilities
 * People who view interfaces using an adapted layout

</Column>
</Row>
</div>

export default ({ children, _frontmatter }) => (<React.Fragment>{children}</React.Fragment>)
